<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">

      <a-spin :style=" spinning ? `top: 300px;left: 50%;position: fixed;z-index: 10000;` : `display:none;` " />

      <a-col :md="24" :lg="5">

        <div class="recommended-books">
          <div class="title">
            <span>📚 图书榜</span>
          </div>
          <ul>
            <li class="book-item">
              <a href="/books/18" target="_blank">
                <img class="book-item-img" src="https://img.golang123.com/upload/img/2018/06/5f111fe1-f6f3-4cb0-a0eb-6cb0458e206a.jpg">
                <div class="book-item-info">
                  <div class="book-item-title">Node.js 调试指南</div>
                  <div>
                    <span class="book-item-buycount">9人已学习</span>
                    <span class="try-read">阅读</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="book-item">
              <a href="/books/43" target="_blank">
                <img class="book-item-img" src="https://img.golang123.com/upload/img/2018/04/cb4e1ba4-9fb5-44f4-9873-50672dc7478e.jpg">
                <div class="book-item-info">
                  <div class="book-item-title">ECMAScript 6 入门</div>
                  <div>
                    <span class="book-item-buycount">5人已学习</span>
                    <span class="try-read">阅读</span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <div class="recommended-authors">
          <div class="title">
            <span style="color: #333;">🎖️ 作者榜</span>
          </div>
          <ul class="list">
              
            <li class="item" :key="index" v-for=" (item , index) in newAuthors ">
              <div class="link">
                <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" class="recommended-avatar" :style="`background-image: url(${item.avatar});`"></a>
                <div class="user-info">
                  <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" class="username">{{ item.realname }}</a>
                  <a target="_blank" class="rank">
                    <img :src="`https://cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/${item.level}.svg`" style="margin-top:-6px;">
                  </a>
                  <div class="position"></div>
                  <div class="description">{{ item.bio }}</div>
                </div>
              </div>
            </li>
            
            <li class="item">
              <a @click="$router.push(`/account/authors/index`);" target="_blank" class="more">
                <span>完整榜单</span>
                <i class="fa fa-angle-right" style="font-size: 16px;"></i>
              </a>
            </li>
          </ul>
        </div>

        <div class="sidebar-block related-entry-sidebar-block shadow" st:block="relatedEntrySidebarBlock">
          <div class="block-title">🔥  最新文章</div>

          <div class="block-body">
            <div class="entry-list" :key="index" v-for="(item , index) in newBlogData ">
              <a @click="handleBlogView(item)" target="_blank" rel="" st:name="link" class="item" >
                <div class="entry-title" style="cursor: pointer;"><a>{{ item.title }}</a></div>
                <div class="entry-meta-box">
                  <div class="entry-meta"><img src="//cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/zan.svg" class="icon"><span class="count">{{item.star}}</span></div>
                  <div class="entry-meta"><img src="//cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/comment.svg" class="icon"><span class="count">{{item.messages}}</span></div>
                </div>
              </a>
            </div>
          </div>
        </div>

      </a-col>

      <a-col :md="24" :lg="19">
        
        <main class="container main-container with-view-nav" style="position:relative;">
          <div class="view recommendation-index-view">
            <nav role="navigation" class="view-nav" style="position:relative;">
              <ul class="nav-list left">
                <template :index="index" v-for="(item , index) in tabListNoTitle">
                  <li @click="nowActive = item.key " :class=" nowActive === item.key ? `nav-item router-link-exact-active route-active active` : 'nav-item' "><a >{{item.key}}</a></li>
                </template>
              </ul>
            </nav>

            <ul class="user-list user-list-block shadow" style="margin-top: 15px;">
              <li class="item" :key="index" v-for="(item , index) in nowAuthors">
                <div itemscope="itemscope" itemtype="http://schema.org/Person" class="user">
                  <meta itemprop="url" :content="item.username">
                  <meta itemprop="image" :content="item.avatar">
                  <meta itemprop="name" :content="item.realname">
                  <meta itemprop="jobTitle" :content=" `${ item.username } | ${ item.bio }` ">
                  <a target="_blank" rel="" class="link">
                    <div :data-src="`${imageURL}/${item.avatar}`" class="lazy avatar avatar loaded" :style="`background-image: url(&quot;${ item.avatar }&quot;);`"></div>
                    <div class="info-box">
                      <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" rel="" class="username">{{ `${item.realname}` }}
                        <a @click="$router.push(`/account/author/${item.username}`)" target="_blank" rel="" class="rank">
                          <img :src="`https://cdn.jsdelivr.net/gh/Miazzy/yunwisdoms@v3.0.0/images/${item.level}.svg`" alt="level" style="margin-top:-7px;">
                        </a>
                      </a>
                      <div class="detail"> {{ `${ item.username } | ${ item.bio == null || typeof item.bio == 'undefined' ? '' : item.bio }` }} </div>
                      <div class="describe">获得 {{ `${item.stars}` }} 赞 · {{ `${item.visits}` }} 阅读</div>
                    </div>
                    <button :style=" (myWatchString.includes(`,${item.username},`) ? `color:#fff;background-color:#6cbd45;` : ``) " @click=" myWatchString.includes(`,${item.username},`) ? (handleClearWatch(item.username)) : (handleWatchAuthor(item.username))" class="follow-btn" v-show="item.username !== userInfo.username">  {{ (spinning === true && nowloadname === item.username)? '关注中' : (myWatchString.includes(`,${item.username},`) ? '已关注' : '关注') }} </button>
                  </a>
                </div>
              </li>
            </ul>

          </div>
        </main>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import PageLayout from "@/components/page/PageLayout";
import RouteView from "@/components/layouts/RouteView";
import { ArticlePage } from "./page";
import * as manageAPI from "@/api/manage";
import * as storage from "@/utils/storage";
import * as tools from "@/utils/util";
import * as authortool from "@/api/blogAPI/author";
import * as hashtoken from "@/api/hashToken/hashtoken";

export default {
  components: {
    RouteView,
    PageLayout,
    ArticlePage,
  },
  data() {
    return {
      tags: [],
      imageURL:window._CONFIG['uploadURL'],
      postName: "",
      departName: "",
      address: "",
      bio: "",
      tagInputVisible: false,
      tagInputValue: "",
      tabListNoTitle: JSON.parse(`[{"key":"推荐","tab":"推荐","index":0},{"key":"社会","tab":"社会","index":1},{"key":"科学","tab":"科学","index":2},{"key":"百家","tab":"百家","index":4},{"key":"金融","tab":"金融","index":5},{"key":"建筑","tab":"建筑","index":6},{"key":"艺术","tab":"艺术","index":7},{"key":"团队","tab":"团队","index":8},{"key":"问答","tab":"问答","index":9},{"key":"前端","tab":"前端","index":10},{"key":"Android","tab":"Android","index":11},{"key":"iOS","tab":"iOS","index":12},{"key":"后端","tab":"后端","index":13},{"key":"人工智能","tab":"人工智能","index":3}]`),
      fdata: null,
      userinfo: null,
      v_user: null,
      newBlogData:null,
      nowBlogData:null,
      nowBlogType:'hot',
      nowPageType:'article',
      nowWatchFlag: false,
      watchTypeFlag: 'self',
      newAuthors:null,
      nowFans:null,
      nowWatchs:null,
      myWatchs:null,
      myWatchString:'',
      nowAuthor:null,
      nowAuthors:null,
      routeParams:null,
      routeQuery:null,
      spinning:false,
      nowloadname:null,
      nowActive:'推荐',
      noTitleKey: "推荐文章"
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    }
  },
  /**
   * @function 初始化
   */
  async created() {
    //页面创建初始化操作
    await this.initAuthorRankPage();
  },
  /**
   * @function 页面创建完毕，执行mounted处理操作
   */
  async mounted() {
    
  },
  watch: {
    $route(to, from) {
      //页面跳转初始化操作
      this.initAuthorRankPage();
    }
  },
  methods: {
    ...Vuex.mapGetters(["nickname", "avatar"]),
    async initAuthorRankPage(){
        try {
          //获取用户信息
          this.user = this.userInfo;
          //设置title_key
          storage.setStore(`system_title_key`,this.noTitleKey);

          try {
            this.routeParams = this.$route.params ;
            this.roueteQuery = this.$route.query ;
          } catch (error) {
            console.log(error);
          }

          try {
            //排行榜作者
            this.newAuthors = await authortool.queryAuthorRank(0, 3, storage , tools);
          } catch (error) {
            console.log(error);  
          }

          try {
            //最新前十博文
            this.newBlogData = await manageAPI.queryBlogInfo(0 , 5);
          } catch (error) {
            console.log(error);
          }

          try {
            //获取缓存中的关注用户信息
            let watchs = storage.getStore(`system_user_${this.userInfo.username}_watch_users_cache`);
            //获取用户粉丝/关注者
            this.myWatchs = await this.handleMyWatchs();
            //获取关注用户字符串
            this.myWatchString = (this.myWatchs.map(obj => {return obj.watch})).toString();
            //设置关注用户字符串
            this.myWatchString = `,${this.myWatchString},${watchs}`;
          } catch (error) {
            console.log(error);
          }

          try {
            //获取用户榜单信息
            let start = Math.round(Math.random() * 10);
            await this.handleAuthorAll(start, 99 , 'exp' , 2);
          } catch (error) {
            console.log(error);
          }

        } catch (error) {
          console.log("工作台设置员工岗位信息/部门信息异常：" + error);
        }

    },
    /**
     * @function 处理关注标识
     */
    async handleWatchFlag(){
      var result = await this.queryTableDataByWhere('bs_blog_attention',`_where=(create_user,eq,${this.userInfo.username})~and(watch_user,eq,${this.$route.params.id})`);
      if (result) {
        this.nowWatchFlag = true;
        return true;
      } else {
        this.nowWatchFlag = false;
        return false;
      }
    },
    /**
     * @function 获取用户的粉丝
     */
    async handleAuthorFans(username){
      this.nowFans = await this.queryWatchsAll(0 , 99 , 'fans' , 'v_fans' , username);
      return this.nowFans;
    },
    /**
     * @function 获取用户的关注用户
     */
    async handleAuthorWatchs(username){
      this.nowWatchs = await this.queryWatchsAll(0 , 99 , 'watch' , 'v_watch' , username);
      return this.nowWatchs;
    },
    /**
     * @function 查询所有用户信息，目前只查询前1000个用户信息
     */
    async handleAuthorAll(page = 0, size = 99 , type = 'exp' , times = 5){
      this.nowAuthors = await this.queryAuthorsAll(page, size, type, times);
      if(this.nowAuthors == null || typeof this.nowAuthor == 'undefined' || this.nowAuthors.length < 50){
        this.nowAuthors = await this.queryAuthorsAll(0, 99, type, times);
      }
      let topAuthors = [...this.newAuthors];
      let start = Math.round(Math.random()*(this.nowAuthors.length - 100)) ; 
      topAuthors.push(...this.nowAuthors.slice(start ,start + 97))
      this.nowAuthors = topAuthors;
      this.nowAuthors.each((item) => {
        item.avatar = item.avatar.startsWith('file') ? (this.imageURL + '/' + item.avatar) : item.avatar;
      });
      this.nowAuthors = this.nowAuthors.filter( (element, index, array) => {
        let itemIndex = array.findIndex((item) => { return item.username === element.username });
        return itemIndex === index;
      });
      return this.nowAuthors;
    },
    /**
     * @function 获取当前用户的关注用户
     */
    async handleMyWatchs(page = 0 , size = 99 , times = 10 , expiretime = 10){
      if(this.$route.params.id === this.userInfo.username){
        size = Math.round(Math.random() * 50) + 50;
        size = size >= 100 ? Math.round(Math.random() * 50) + 50 : size;
        times = Math.round(1000 / size) + 1 ;
        this.myWatchs = await this.queryWatchsAll(page , size , 'watch' , 'v_watch' , this.userInfo.username , times , expiretime);
        this.nowWatchs = this.myWatchs;
      } else {
        size = Math.round(Math.random() * 50) + 50;
        size = size >= 100 ? Math.round(Math.random() * 50) + 50 : size;
        times = Math.round(1000 / size) + 1 ;
        this.myWatchs = await this.queryWatchsAll(page , size , 'watch' , 'v_watch' , this.userInfo.username , times , expiretime);
      }
      return this.myWatchs;
    },
    /**
     * @function 执行取消关注函数
     */
    async handleClearWatch(username){
      //设置加载状态
      await (() => {this.spinning = true; this.nowloadname = username })();
      //执行取消关注操作
      if(this.myWatchString.includes(`,${username},`)){
        //sleep 300ms , 等待loading状态渲染完成
        await tools.sleep(100);
        //执行取关
        let result = authortool.handleClearWatch(this.userInfo.username, username, this, storage, tools, hashtoken);
        let arr = this.myWatchString.split(',');
        arr = arr.filter( (item , index , array) => {
            return item && item.trim() && item !== username && item !== 'undefined' && item !== 'null' && array.indexOf(item) === index; 
        });
        //获取关注的缓存
        this.myWatchString = `,${arr},`;
        //将新关注的放入缓存
        storage.setStore(`system_user_${this.userInfo.username}_watch_users_cache` , this.myWatchString , 3600 * 2);
        //取消loading状态
        await (() => { this.spinning = false; })();
        //设置关注操作，返回数据
        return result;
      } else {
        //取消loading状态
        await (() => { this.spinning = false; })();
        //设置关注操作，返回数据
        return false;
      }
    },
    /**
     * @function tab栏关注界面关注/粉丝/标签切换
     */
    async handleWatchType(type){
      this.watchTypeFlag = type;
    },
    /**
     * @function 切换博文类型
     */
    async handleBlogType(type){
      //获取博文类型对应字段
      var stype = authortool.queryBlogTypeValue(type);
      //热门 和 最新 博文之间进行切换
      this.nowBlogType = type;
      //计算相应的博文数据
      this.nowBlogData = await authortool.queryBlogsAllByAuthor(0 , 99 , this.$route.params.id , stype , 10 , storage , tools , true);
      //返回相应的博文数据
      return this.nowBlogData;
    },
    /**
     * @function 切换Tab栏类型
     */
    async handlePageType(type){
      //tab栏之间互相切换
      this.nowPageType = type;
    },
    /**
     * @function 关注当前博客作者
     */
    async handleWatchAuthor(username){
      await (() => {this.spinning = true; this.nowloadname = username })();
      if(!this.myWatchString.includes(`,${username},`)){
        //设置loading状态
        //进行关注操作
        var result = await authortool.handleWatchAuthor(this.userInfo.username, username, this, storage , tools, hashtoken);
        //获取关注的缓存
        this.myWatchString = `${this.myWatchString},${username},`
        //将新关注的放入缓存
        storage.setStore(`system_user_${this.userInfo.username}_watch_users_cache` , this.myWatchString , 3600 * 2);
        //取消loading状态
        await (() => { this.spinning = false; })();
        //设置关注操作，返回数据
        return result;
      } else {
        //显示提示内容
        this.$message.success('你已经关注过此用户啦！');
        //取消loading状态
        await (() => { this.spinning = false; })();
        //设置关注操作，返回数据
        return false;
      }
    },
    /**
     * @function 查询所有用户信息
     */
    async queryAuthorsAll(page = 0, size = 99 , type = 'exp' , times = 10){
      return await authortool.queryAuthorsAll(page , size , type , times , storage, tools );
    },
    /**
     * @function 查询所有用户信息
     */
    async queryWatchsAll(page = 0, size = 99 , type = 'watch' , table = 'v_watch', username , times = 10){
      return await authortool.queryWatchsAll(page , size , type , table , username , times , storage , tools);
    },
    /**
     * @function 查询数据
     * @param {*} tableName
     * @param {*} id
     */
    async queryTableDataByWhere(tableName, whereSQL){
      return await authortool.queryTableDataByWhere(tableName, whereSQL, storage, tools, 3600 * 2);
    },
    /**
     * @function 查询数据
     * @param {*} tableName
     * @param {*} id
     */
    async queryTableDataByWhereMore(tableName, whereSQL){
      return await authortool.queryTableDataByWhereMore(tableName, whereSQL , storage, tools , 3600 * 2);
    },
    /**
     * @function 处理博文预览功能
     */
    async handleBlogView(item) {
      return await authortool.handleIntoBlogView(item , tools , this);
    }
  }
};
</script>

<style lang="scss" scoped>

.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }

  article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
  }

  main {
    display: block;
  }

  .main-container.with-view-nav>.view {
    margin-top: 0rem;
  }

  .main-container>.view {
    margin-top: 1.767rem;
  }

  .recommendation-index-view {
    padding-bottom: 50px;
  }

  .view-nav, .view-nav:before {
    left: 0;
    background-color: #fff;
  }

  .view-nav {
    position: fixed;
    top: 0rem;
    width: 100%;
    height: 4.833rem;
    z-index: 100;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    transition: all .2s;
    transform: translateZ(0);
  }

  .view-nav .nav-list {
    max-width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    line-height: 1;
  }
  
  .view-nav ul {
    padding: 0;
    margin: 0;
  }

  .view-nav ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .view-nav .nav-list .nav-item .active, .view-nav .nav-list .nav-item:hover {
    color: #007fff;
  }

  .view-nav .nav-list .nav-item:first-child {
    padding: 0 1rem 0 0;
  }

  .view-nav .nav-list .router-link-exact-active a {
    color: #007fff;
  }

  .view-nav .nav-list .nav-item {
    height: 100%;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    font-size: 15px;
    color: #71777c;
    padding: 0 1rem;
  }

  .nav-item {
    position: relative;
    cursor: pointer;
  }

  .view-nav ul li {
    list-style: none;
  }

  .view-nav ul li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .view-nav ul li {
    font-size: 14px;
  }

  .item:not(:last-child), .skeleton:not(:last-child) {
    border-bottom: 1px solid rgba(178,186,194,.15);
  }

  .view-nav ul li {
    list-style: none;
  }

  .view-nav ul li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .view-nav .nav-list {
    max-width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .user-list-block {
    width: 700px;
    background-color: #fff;
  }

  .user {
    position: relative;
    box-sizing: border-box;
  }

  .shadow {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .view-nav ul {
    padding: 0;
    margin: 0;
  }

  .view-nav ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  a {
    color: #2d8cf0;
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease;
  }

  .main-box {
    width: 90%;
    display: flex;
    margin: 20px auto 32px;
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 32px;
  }

  .major-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  .user-info-block {
    display: flex;
    padding: 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .user-info-block-avatar {
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    flex: 0 0 auto;
    margin-right: 28px;
    width: 90px;
    height: 90px;
    background-color: #f9f9f9;
    border-radius: 50%;
  }

  .user-info-block .info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    margin-right: 24px;
  }

  .user-info-block .info-box .top {
    display: flex;
    align-items: center;
  }

  .user-info-block .info-box .top .username {
    margin: 0;
    padding: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
  }

  .rank {
    margin-left: 4px;
    vertical-align: middle;
  }

  .info-box .position {
    margin-top: 12px;
    display: flex;
    font-size: 15px;
    line-height: 1.5;
    color: #72777b;
  }

  .info-box .position-icon {
    flex: 0 0 auto;
    margin-right: 7px;
    height: 22px;
  }

  svg:not(:root) {
    overflow: hidden;
  }

  .info-box .position .content {
    flex: 1 1 auto;
    font-size: 14px;
  }

  .info-box .intro {
    margin-top: 5px;
    display: flex;
    font-size: 15px;
    line-height: 1.5;
    color: #72777b;
  }

  .info-box .intro-icon {
    flex: 0 0 auto;
    margin-right: 7px;
    height: 22px;
  }

  .user-info-block .action-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .follow-btn {
    flex: 0 0 auto;
    margin: 0 0 0 12px;
    padding: 0;
    width: 90px;
    height: 30px;
    font-size: 12px;
    color: #92c452;
    background-color: #fff;
    border: 1px solid #92c452;
    border-radius: 2px;
    outline: none;
    transition: background-color .3s,color .3s;
    cursor: pointer;
  }

  .list-block {
    margin-top: 12px;
  }

  .list-header {
    position: relative;
    margin: 0;
    padding: 0;
    height: 50px;
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid #ebebeb;
    z-index: 100;
  }

  .list-header .header-content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 100%;
    max-width: 960px;
    white-space: nowrap;
  }

  .list-header .nav-item.active {
    box-shadow: inset 0 -2px 0 #ea6f5a;
  }

  .list-header .nav-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 90px;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
  }

  .list-header .nav-item.active .item-count, .list-header .nav-item.active .item-title {
    color: #ea6f5a;
  }

  .list-header .nav-item .item-title {
      font-size: 16px;
      font-weight: 500;
      color: #31445b;
  }

  .list-header .nav-item.active .item-count, .list-header .nav-item.active .item-title {
      color: #ea6f5a;
  }

  .list-header .nav-item .item-count {
      margin-left: 5px;
      font-size: 15px;
      color: #b2bac2;
      line-height: 1;
  }

  .list-header .nav-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 90px;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
  }

  .post-list-box, .sub-header {
    background-color: #fff;
  }

  .post-list-box, .sub-header {
    background-color: #fff;
  }

  .list-body .sub-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    height: 50px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(230,230,231,.5);
  }

  .list-body .sub-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    height: 50px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(230,230,231,.5);
  }

  .list-body .sub-header .sub-header-title {
    margin-right: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }

  .post-list-box, .sub-header {
    background-color: #fff;
  }

  .list-body .sub-header .sub-header-title {
    margin-right: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }

  .list-body .sub-header .sub-type-box {
    margin-left: auto;
  }

  .list-body .sub-header .sub-type-box .sub-type:not(:last-child) {
    margin-right: 24px;
  }

  .list-body .sub-header .sub-type-box .sub-type.active {
    color: #000;
  }

  .list-body .sub-header .sub-type-box .sub-type:not(:last-child) {
    margin-right: 24px;
  }

  .list-body .sub-header .sub-type-box .sub-type {
      position: relative;
      padding: 12px 0;
      font-size: 14px;
      color: #72777b;
  }

  .link:not(:last-child) {
    border-bottom: 1px solid rgba(230,230,231,.5);
  }

  .link{
      display: flex;
      align-items: center;
      padding: 6px 20px;
      min-height: 84px;
  }

  .avatar {
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    flex: 0 0 auto;
    margin-right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
  }

  .info-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  .info-box .username {
    font-size: 16px;
    font-weight: 600;
    color: #2e3135;
  }

  .info-box .detail {
    margin-top: 7px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #b9c0c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-body .sub-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    height: 50px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(230,230,231,.5);
  }

  .post-list-box, .sub-header {
    background-color: #fff;
  }

  .list-body .sub-header .sub-header-title {
    margin-right: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
  }

  .list-body .sub-header .sub-type-box {
    margin-left: auto;
  }

  .list-body .sub-header .sub-type-box .sub-type:not(:last-child) {
    margin-right: 24px;
  }

  .list-body .sub-header .sub-type-box .sub-type {
      position: relative;
      padding: 12px 0;
      font-size: 14px;
      color: #72777b;
  }

  .list-body .sub-header .sub-type-box .sub-type.active {
    color: #000;
  }

  .article-list {
    width: 100%;
  }

  .article-list-item {
      padding: 20px;
      margin-bottom: 0;
      box-sizing: border-box;
  }

  .article-list-item {
      position: relative;
      width: 100%;
      margin: 0;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;
      word-wrap: break-word;
  }

  .list-body .sub-header .sub-type-box .sub-type {
      position: relative;
      padding: 12px 0;
      font-size: 14px;
      color: #72777b;
  }

  .article-content {
      margin-bottom: 0;
  }

  .article-content {
      margin: 0 0 8px;
      font-size: 13px;
      line-height: 24px;
      color: #999;
  }

  .article-content-and-img {
    display: flex;
    margin-bottom: 8px;
  }

  .article-title-summary {
    flex: 1;
  }

  .article-title {
    margin-top: 0;
  }

  .iconfont {
    font-family: iconfont!important;
    font-size: inherit;
    font-style: normal;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ic-list-read:before {
    content: "\E662";
  }

  .article-title:visited {
      color: #909090;
  }

  .article-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      color: #333;
      margin: -7px 0 4px;
      display: inherit;
  }

  .article-content {
    margin-bottom: 0;
  }

  .article-content {
      margin: 0 0 8px;
      font-size: 13px;
      line-height: 24px;
      color: #999;
  }

  .article-meta {
      display: flex;
  }

  .article-meta {
      padding-right: 0!important;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
  }

  .article-view-like {
    flex: 1;
  }

  .article-meta a {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
    margin-right: 10px;
    color: #b4b4b4;
  }

  .iconfont {
    font-family: iconfont!important;
    font-size: inherit;
    font-style: normal;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .article-meta a {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
    margin-right: 10px;
    color: #b4b4b4;
  }

  .article-meta span {
    margin-right: 10px;
    color: #b4b4b4;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }

  .minor-box {
    flex: 0 0 auto;
    margin-left: 12px;
    width: 240px;
    line-height: 14px;
  }

  .minor-area-box {
    width: 240px;
    transition: all .2s;
  }

  .user-stat-block {
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .user-stat-block .block-title {
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #31445b;
    border-bottom: 1px solid rgba(230,230,231,.5);
  }

  .user-stat-block .block-body {
    padding: 16px;
  }

  .user-stat-block .block-body .stat-item:not(:last-child) {
    margin-bottom: 10px;
  }

  .user-stat-block .block-body .stat-item {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #000;
  }

  .user-stat-block .block-body .stat-item .article-view-icon, .user-stat-block .block-body .stat-item .zan-icon , .user-stat-block .block-body .stat-item .stat-jp-icon {
    flex: 0 0 auto;
    margin-right: 14px;
  }

  .user-stat-block .block-body .stat-item .count {
    margin: 0 5px;
    font-weight: 500;
  }

  .follow-block {
    display: flex;
    position: relative;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .follow-block .follow-item {
    flex: 1 1 auto;
    padding: 16px 0;
    text-align: center;
    color: #31445b;
    text-decoration: none;
  }

  .follow-block .follow-item .item-title {
    font-size: 16px;
    font-weight: 500;
  }

  .follow-block .follow-item .item-count {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
  }

  .more-block {
    background-color: transparent;
    border-radius: 2px;
  }

  .more-block .more-item {
    display: flex;
    padding: 15px 5px;
    font-size: 15px;
    color: #000;
    border-top: 1px solid rgba(230,230,231,.5);
  }

  .more-block .more-item .item-title {
    margin-right: auto;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    color: #606060;
    color: #333;
  }

  a:hover { 
    text-decoration: none;
    cursor: pointer;
    color: #1890FF;
  }

  .recommended-books {
    padding: 0;
  }

  .sidebar-block:not(.pure) {
    background-color: #fff;
  }

  .sidebar-block {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 2px;
  }

  .sidebar-block:not(.pure) .block-title {
    padding: 1rem 1.3rem;
    font-size: 14px;
    margin-left: 3px;
    color: #333;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .item {
    display: block;
    cursor: pointer;
    padding: .8rem 1.3rem;
  }

  .entry-title {
    font-size: 1.16rem;
    color: #333;
    cursor: pointer;
  }

  .entry-title:hover { 
    cursor: pointer;
  }

  .entry-meta-box {
    margin-top: .4rem;
  }

  .entry-meta {
    display: inline-block;
    margin-right: 1.5rem;
    font-size: 1.1rem;
    color: #c2c2c2;
  }

  .entry-meta .icon {
    vertical-align: sub;
  }

  .entry-meta .count {
    color: #b2bac2;
    margin-left: .4rem;
  }

  .recommended-authors .title, .recommended-books .title {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .recommended-authors, .recommended-books {
      border-radius: 2px;
      overflow: hidden;
      background: #fff;
      margin-bottom: 20px;
      font-size: 13px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .recommended-authors .title, .recommended-books .title {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid hsla(0,0%,58.8%,.1);
  }

  .recommended-authors .title span, .recommended-books .title span {
    font-size: 14px;
    color: #333;
  }

  .recommended-authors .item .link {
    padding: 12px 16px;
    display: flex;
    align-items: center;
  }

  .recommended-authors .recommended-avatar {
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .recommended-authors .user-info {
    overflow: hidden;
    text-align: left;
  }

  .recommended-authors .username {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
  }

  .recommended-authors .rank {
    margin-left: 4px;
    vertical-align: middle;
  }

  .recommended-authors .link .description, .recommended-authors .link .position {
    color: #909090;
    font-size: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recommended-authors .link .description, .recommended-authors .link .position {
    color: #909090;
    font-size: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recommended-authors .item .more {
    display: block;
    color: #ea6f5a;
    padding: 12px 0;
    text-align: center;
    border-top: 1px solid hsla(0,0%,59.2%,.1);
  }

  .recommended-books .book-item {
    padding: 15px;
    overflow: hidden;
    margin-bottom: 0;
  }

  .recommended-authors, .recommended-books {
      border-radius: 2px;
      overflow: hidden;
      background: #fff;
      margin-bottom: 20px;
      font-size: 13px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }

  .recommended-books .book-item a {
    display: block;
    overflow: hidden;
  }

  .recommended-books .book-item-info {
    float: left;
    width: 148px;
    margin-left: 10px;
    text-align: left;
  }

  .recommended-books .book-item-title {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .book-item-buycount {
    color: #878c90;
    float: left;
    height: 20px;
    line-height: 20px;
  }

  .try-read {
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 2px;
    background-color: #007fff;
    float: right;
  }

  *, :after, :before {
      box-sizing: border-box;
  }

  .recommended-books .book-item-img {
    float: left;
    width: 52px;
    height: 72px;
  }
  
}

</style>